<template>
  <div class="container">

    <div class="header">
    <div > </div>
    <div style="font-size: larger;">
    <img  style="height: 125px;" src="../assets/logo.png" alt="">
    </div>
  </div>
  <div class="main">
<!--
    <div class="img">
      <div style="height: 400px; width: 325px;">
         <img  style="height: 400px; width: 325px;" src="../assets/login.jpg" alt=""> 
      </div>

  </div> -->
  <div class="login">


    <div  class="box">
      <div style="margin-left: 50%; margin-bottom: 4  0px;"> <span style="font-size: larger;">{{ reg?'注  册':"登  录" }} </span></div>

  <div style="margin-top: 10px;" v-if="!reg">
  <el-form :model="user" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="user!.userName" />
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="user!.password" type="password" />
        </el-form-item>

        <div style="margin-left: 30%;" class="mb-2 flex items-center text-sm">
          <el-radio-group v-model="radio1" class="ml-4">
            <el-radio  label="1" size="large">我同意</el-radio>
          </el-radio-group>
          <span style="font-size: medium; text-align: center;" @click="dialogVisible=true">用户协议、隐私政策</span> 
        </div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button type="primary" @click="adminLog">管理员</el-button>
          <el-button @click="reg=true">注册</el-button>
        </el-form-item>
      </el-form>






      <el-dialog
    v-model="dialogVisible"
    title="用户协议、隐私政策"
    width="70%"
  >
    <p>本应用尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。但本应用将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下，本应用不会将这些信息对外披露或向第三方提供。本应用会不时更新本隐私权政策。 您在同意本应用服务使用协议之时，即视为您已经同意本隐私权政策全部内容。本隐私权政策属于本应用服务使用协议不可分割的一部分。</p>
    <p>1. 适用范围</p>
    <p>(a) 在您注册本应用帐号时，您根据本应用要求提供的个人注册信息；</p>
    <p>(b) 在您使用本应用网络服务，或访问本应用平台网页时，本应用自动接收并记录的您的浏览器和计算机上的信息，包括但不限于您的IP地址、浏览器的类型、使用的语言、访问日期和时间、软硬件特征信息及您需求的网页记录等数据；</p>
    <p>(c) 本应用通过合法途径从商业伙伴处取得的用户个人数据。</p>
    <p>您了解并同意，以下信息不适用本隐私权政策：</p>
    <p>(a) 您在使用本应用平台提供的搜索服务时输入的关键字信息；</p>
    <p>(b) 本应用收集到的您在本应用发布的有关信息数据，包括但不限于参与活动、成交信息及评价详情；</p>
    <p>(c) 违反法律规定或违反本应用规则行为及本应用已对您采取的措施。</p>
    
    <p>2. 信息使用</p>
    <p>(a)本应用不会向任何无关第三方提供、出售、出租、分享或交易您的个人信息，除非事先得到您的许可，或该第三方和本应用（含本应用关联公司）单独或共同为您提供服务，且在该服务结束后，其将被禁止访问包括其以前能够访问的所有这些资料。</p>
    <p>(b) 本应用亦不允许任何第三方以任何手段收集、编辑、出售或者无偿传播您的个人信息。任何本应用平台用户如从事上述活动，一经发现，本应用有权立即终止与该用户的服务协议。</p>
    <p>(c) 为服务用户的目的，本应用可能通过使用您的个人信息，向您提供您感兴趣的信息，包括但不限于向您发出产品和服务信息，或者与本应用合作伙伴共享信息以便他们向您发送有关其产品和服务的信息（后者需要您的事先同意）。</p>
    <p>3. 信息披露</p>
    <p>在如下情况下，本应用将依据您的个人意愿或法律的规定全部或部分的披露您的个人信息：</p>
    <p>(a) 经您事先同意，向第三方披露；</p>
    <p>(b)为提供您所要求的产品和服务，而必须和第三方分享您的个人信息；</p>
    <p>(c) 根据法律的有关规定，或者行政或司法机构的要求，向第三方或者行政、司法机构披露；</p>
    <p>(d) 如您出现违反中国有关法律、法规或者本应用服务协议或相关规则的情况，需要向第三方披露；</p>
    <p>(e) 如您是适格的知识产权投诉人并已提起投诉，应被投诉人要求，向被投诉人披露，以便双方处理可能的权利纠纷；</p>
    <p>(f) 在本应用平台上创建的某一交易中，如交易任何一方履行或部分履行了交易义务并提出信息披露请求的，本应用有权决定向该用户提供其交易对方的联络方式等必要信息，以促成交易的完成或纠纷的解决。</p>
    <p>(g) 其它本应用根据法律、法规或者网站政策认为合适的披露。</p>
    <p>4. 信息存储和交换</p>
    <p>本应用收集的有关您的信息和资料将保存在本应用及（或）其关联公司的服务器上，这些信息和资料可能传送至您所在国家、地区或本应用收集信息和资料所在地的境外并在境外被访问、存储和展示。</p>
    <p>5. 信息安全</p>
    <p>(a) 本应用帐号均有安全保护功能，请妥善保管您的用户名及密码信息。本应用将通过对用户密码进行加密等安全措施确保您的信息不丢失，不被滥用和变造。尽管有前述安全措施，但同时也请您注意在信息网络上不存在“完善的安全措施”。</p>
    <p>(b) 在使用本应用网络服务进行网上交易时，您不可避免的要向交易对方或潜在的交易对方披露自己的个人信息，如联络方式或者邮政地址。请您妥善保护自己的个人信息，仅在必要的情形下向他人提供。如您发现自己的个人信息泄密，尤其是本应用用户名及密码发生泄露，请您立即联络本应用客服，以便本应用采取相应措施。</p>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

</div>


<div v-else>
  <el-form
    ref="ruleFormRef"
    :model="userReg"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
  <el-form-item label="用户名" prop="username">
      <el-input v-model.number="userReg.username" />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="userReg.password" type="password" autocomplete="off" />
    </el-form-item>

    <el-form-item label="确认密码" prop="checkPass">
      <el-input
        v-model="userReg.checkPass"
        type="password"
        autocomplete="off"
      />

    </el-form-item>

    <el-form-item style="width: auto;">
      <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      <el-button @click="reg = false">返回</el-button>
      
    </el-form-item>
  </el-form>
</div>
      

    </div>




  </div>

  </div>

  </div>


  



</template>

<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue'
import { login, register ,adminLogin} from '@/api/User';
import type { User, UserAttr } from '@/modle/User'
import { useCounterStore } from '@/stores/counter';
import { ElMessage, type FormInstance } from 'element-plus';
import { useRouter } from 'vue-router';

const dialogVisible = ref(false)

const adminLog = () => {
  if ( radio1.value !== '1' ) {
    ElMessage({
      message:'请你同意',
      type:'error'
    })
    return
  }
  adminLogin(user.value).then((res: any) => {
    console.log(res.data);
    if (res.data.code === 200) {
      store.setUser(res.data.data as UserAttr)
      ElMessage({
        message:res.data.msg,
        type:'success'
      })
      router.push('/admin/index')
    }else {
      ElMessage({
        message:res.data.data,
        type:'error'
      })
    }
  })
}


const reg = ref(false)




const router = useRouter()
const store = useCounterStore()

const ruleFormRef = ref<FormInstance>()

const checkName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入 the age'))
  }
  callback()
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入 the password'))
  } else {
    if (userReg.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入 the password again'))
  } else if (value !== userReg.password) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const userReg = reactive({
  password: '',
  checkPass: '',
  username: '',
})

const rules = reactive({
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  username: [{ validator: checkName, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      register({
        userName:userReg.username,
        password:userReg.password
      }).then(res => {
        if(res.data.code === 200) {
          ElMessage({
    message: '注册成功',
    type: 'success',
      })
      store.setUser({
        userName:userReg.username,
        money:0
      })
      router.push('/')
      
        }else {
          ElMessage({
    message: res.data.data,
    type: 'error',
      })
        }
    })
    } else {
      ElMessage({
    message: '不对',
    type: 'error',
      })
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}














const radio1 = ref()
// const store = useCounterStore()
// do not use same name with ref
const user = ref<User>({
  userName: '',
  password: ''
})

const onSubmit = () => {
  if ( radio1.value !== '1' ) {
    ElMessage({
      message:'请你同意',
      type:'error'
    })
    return
  }
  login(user.value).then((res: any) => {
    console.log(res.data);
    if (res.data.code === 200) {
      store.setUser(res.data.data as UserAttr)
      ElMessage({
        message:res.data.msg,
        type:'success'
      })
      router.push('/')
    }else {
      ElMessage({
        message:res.data.msg,
        type:'error'
      })
    }
  })
}
</script>

<style scoped >
.login {
  width: 450px;
  height: 300px;
  border-radius: 10px;
  box-shadow: 0 6px 20px 0 rgba(37, 43, 50, .07);
  display: flex;
  justify-content: center;
}

.box {
  height: 100%;
  width: 100%;


}

.img {

  border-radius: 10px;
  overflow: hidden;
  width: 650 * 0.7px;
  height: 952 * 0.7px;
}

img {
  width: 650 * 0.7px;
  height: 952 * 0.7px;
}

.header {
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;

}
.main{
  flex: 1;
  width: 1000px;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  background-image: url("../assets/bk.jpg");
}
</style>